<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="layout">
<head>
<title>相册添加</title>
<style>
* {
	margin: 0;
	padding: 0
}

#containner {
	margin: 0 auto;
	padding: 20px;
	background: #eee;
	overflow: hidden;
	position: relative
}

#uploadready {
	border: 2px dashed #ccc;
	border-radius: 3px;
	float: right;
	width: 100%;
	text-align: left
}

#uploadready h2 {
	text-align: center;
	background: #f8f8f8;
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	color: #555;
	font-size: 16px
}

#uploadready #dropbox {
	height: 480px;
	overflow-y: auto;
}

#uploadready li {
	border: 1px solid #DDDDDD;
	float: left;
	font-size: 12px;
	height: 290px;
	line-height: 1.6;
	list-style: none outside none;
	padding: 10px;
	position: relative;
	margin: 10px 0 0 10px;
	overflow: hidden;
	box-shadow: 2px 2px 2px #ddd;
	-moz-box-shadow: 2px 2px 2px #ddd;
	-webkit-box-shadow: 2px 2px 2px #ddd
}

#uploadready li p {
	background: #F9F4E6;
	color: #090;
	padding: 1px 4px;
	cursor: text;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: #ccc;
	border-top: #ccc;
	border-right: #ddd;
	border-bottom: #ddd;
	border-width: 1px;
	border-style: solid
}

#uploadready li p:focus {
	background: #FC9
}

.img_and_info img:hover {
	cursor: pointer;
	opacity: .8
}

#uploadready li span {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	text-indent: -9999px;
	background: url(images/delete_x.png);
	margin-left: -32px;
	margin-top: -32px;
	cursor: pointer;
	width: 64px;
	height: 64px
}

#uploadready li:hover span {
	display: block
}

.source {
	border: 1px solid #666;
	background: #FFC;
	cursor: pointer;
	padding: 5px 12px;
	font-size: 12px;
	float: left;
	margin-top: 5px
}

#uploadView {
	min-height: 100px;
	background: #fff;
	border: 10px solid #ddd;
}

#dropbox img {
	display: block;
	margin: 20px auto 5px
}

#dropbox ul {
	padding: 0;
	margin: 0
}

progress {
	background-color: #EEEEEE;
	border: none;
	border-top: 1px solid #ccc;
	bottom: 0;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%
}

progress::-webkit-progress-bar {
	background-color: #d7d7d7;
}

progress::-webkit-progress-value {
	background-color: #f00;
}

.box-shadow {
	box-shadow: 0px 0px 8px #999 inset; /* For Firefox3.6+ */
	-webkit-box-shadow: 5px 5px 5px #999 inset;
	background: #f8f8f8 /* For Chrome5+, Safari5+ */
}

#upload_btn {
	width: 100%;
	height: 38px;
	font-size: 18px;
}

#dropbox img {
	background: url('/jscss/demoimg/loading.gif') enter center no-repeat;
	max-width: 230px;
	max-height: 230px
}

#dropbox ul {
	mix-height: 0px
}

.btns {
	clear: both;
	padding: 8px 0
}

.btns input {
	padding: 5px 20px;
	margin-right: 10px
}
</style>
</head>
<body>
	<div layout:fragment="content">
		<div class="row">
			<div class="col-md-12">
				<div class="btn-group pull-right">
					<a href="index.html" th:href="@{'/goods/album/list/'+${goodId}}" 
						id="Link_cancel" class="btn green">返回<i
						class="fa fa-arrow-circle-o-left"></i></a>
				</div>
			</div>
		</div>
		<br/> 
		<input type="hidden" name="goodId" id="goodId" th:value="${goodId}" />
		<div id="containner">
			<div id="uploadready">
 				<form id="upload" method="POST" enctype="multipart/form-data">
				<div id="dropbox">
					<ul id="pageContent"></ul>
					<ul id="uploaded"></ul>
				</div>
				<input type="button" id="upload_btn" style="display:none"  value="上 传"/>
				</form>
			</div>
		</div>
		<div id="uploadView"></div>
	</div>

</body>
</html>


<script th:inline="javascript">
	/*<![CDATA[*/
	           
function uploadPic(e){
		//alert(e.value);
		if(e == ""){
			alert("1");	
		}
	}	           

function sTatus(status) {
	return document.getElementById(status);
} 
	

	
var oDragWrap =sTatus('uploadready');
//拖进
oDragWrap.addEventListener('dragenter', function(e) {
	e.preventDefault();
	sTatus('dropbox').className='box-shadow';
}, false);

//拖离
oDragWrap.addEventListener('dragleave', function(e) {
	sTatus('dropbox').className='';
}, false);

//拖来拖去 
oDragWrap.addEventListener('dragover', function(e) {
　e.preventDefault();
}, false);

//扔下
oDragWrap.addEventListener('drop', function(e) {
e.stopPropagation();
 e.preventDefault();
var files = e.target.files || e.dataTransfer.files;
dropHandler(files)
}, false);

//创建上传图片的数组
var arrFiles=[];
var dropHandler = function(files) {
	sTatus('pageContent').className='';
	sTatus('upload_btn').style.display='block';
for(var f=0;f<files.length;f++){
	if(files[f].type.indexOf("image")==-1){
		alert('文件' + files[f].name + '不是图片。')
		}else{
			arrFiles.push(files[f]);
		}
	}
sTatus('pageContent').innerHTML='';
            
for(var i=0; i<arrFiles.length;i++){
	if(arrFiles[i].index!=='no'){
  	  arrFiles[i].index=parseInt(Math.random() * 9000000);
	  }
	}
   
 for(var i=0; i<arrFiles.length;i++){
	 	if(arrFiles[i].index!=='no'){
	  viewfile(arrFiles[i])
		}
	  }

 for (var i=0; i<arrFiles.length;i++){
	 console.log('新数组的索引'+'arrFiles'+i+':'+arrFiles[i].index)
	}	
 
//触发上传按钮控件  
sTatus('upload_btn').addEventListener('click', function(e) {
	e.preventDefault();
	sTatus('upload_btn').style.display='none';//隐藏上传按钮
	for(var s=0; s<arrFiles.length;s++){
	if(arrFiles[s].index!=='no'){
		ajaxUpload(arrFiles[s])  
	}
	}
	//上传回显
	//viewAlbum();
	arrFiles=null;
	arrFiles=[];	
  }, false);	
}  
	  
//循环上传
  function ajaxUpload(files){
	  xhr = new XMLHttpRequest();
	  xhr.upload.addEventListener('progress',function(e){
			var pc=parseInt(e.loaded/e.total*100);
			if(sTatus('progress'+files.index)){
				sTatus('progress'+files.index).value=pc;}
			console.log(sTatus('progress'+files.index))
			},false)		 
		 xhr.onreadystatechange = function(e) {
		//  alert(xhr.readyState);
		//if (xhr.readyState >0) {
		var oldli=sTatus('imgViewList'+files.index);	
		var imgsrc='uploads/'+files.name;
	    var	uploadLi=document.createElement('li');	 
	    var   html  = '';
			  html += '<div  onclick="insertPic(this)" class="img_and_info">';
			  html += '<img  border="0" src="'+imgsrc+'">';
			  html += '</div>';
			  html += ' <p class="imginfo" contenteditable="true">上传完毕</p>';
	          uploadLi.innerHTML=html;
	          var oldLi=sTatus('imgViewList'+files.index);
	          sTatus('pageContent').removeChild(oldLi);
	          sTatus('uploaded').appendChild(uploadLi);   
		  var bbscode='';
		       bbscode+='[img]/000/uploads/'+files.name+'[/img]<br/>'
		       sTatus('uploadView').innerHTML+=bbscode;
			//}
				};
				
	  var goodsid = document.getElementById("goodId");
	  xhr.open("POST", "/goods/album/upload", true);
     // xhr.setRequestHeader("X-Requested-With",files.name);
      var fd = new FormData();
      fd.append('files', files);
      fd.append('goodsid', goodsid.value);
      xhr.send(fd);
      
    /*   $.ajax({
          url: '/goods/album/upload',
          type: 'post',
          data: {id: goodsid.value,files:files},
          contentType: "application/x-www-form-urlencoded; charset=utf-8",
          error: function () {
              alert('出错');
          },
          success: function (data) {
          }
      }); */
      
}


	

  	  
//显示预览
function viewfile(file){
	if(window.webkitURL){
	var	imgsrc=window.webkitURL.createObjectURL(file)
	createView(file,imgsrc)
	}else if(window.URL){
	var	imgsrc=window.URL.createObjectURL(file)
	createView(file,imgsrc)
	}else{
   	var reader = new FileReader();
	reader.onload = function(e) {
	var	imgsrc=e.target.result;
    createView(file,imgsrc)
　}
  reader.readAsDataURL(file);
  }
}


//创建预览删除
function createView(file,imgsrc){
	var html = "";
	html += '<li id="imgViewList'+file.index+'">';
	html += '<div class="img_and_info">';
	html += '<img  border="0" src="'+imgsrc+'">';
	html += '</div>';
	html += '<span onclick="del(\'imgViewList'+file.index+'\')" class="upload_delete" title="删除">删除</span>'
    html += '<progress value="0" max="100" id="progress'+file.index+'"></progress>'; 
	html += '</li>';
	sTatus('pageContent').innerHTML+=html;	
	}
	
	Array.prototype.del=function(n) {
		if(n<0){　
　　		return this;
	}else{
　　		return this.slice(0,n).concat(this.slice(n+1,this.length));
	}
	}
	
//删除预览
function del(obj){
	   var n=parseInt(obj.substring(11));//获取数组索引
	 	console.log('数组长度为：'+arrFiles.length);
	   for(var s=0;s<arrFiles.length; s++){
		   if(arrFiles[s].index==n){
	   		console.log(arrFiles[s].index='no');
			}
		   }
	   sTatus(obj).parentNode.removeChild(sTatus(obj))
		console.log('目前数组为：'+arrFiles);
	   }   
       
	
	/*]]>*/
</script>